import React, { useState } from 'react';
import { Box, Grid, GridItem, InfoCard, MainButton, makeToast, Text } from '@nova-hf/ui';
import { parseMainColor } from 'beta/utils/typeGuards';
import {
  ServiceType,
  useContractsQuery,
  useConnectToContractsMutation,
} from '../../../../../../../typings/graphql';
import { useRouter } from 'next/router';
import { useTranslation } from '../../../../../../../utils/i18n';
import { serviceColorMap, serviceIconMap, serviceSimpleNameMap } from 'beta/utils/helpers';

interface ChangePaymentMethodsProps {
  contractId?: string;
  color?: string;
  onNext?(): void;
}

const LinkPaymentMethods = ({ color }: ChangePaymentMethodsProps) => {
  const { t } = useTranslation('payments');
  const router = useRouter();
  const COLOR = parseMainColor(color ?? 'pink', 'pink');
  const [chosenContracts, setChosenContracts] = useState<Array<string> | undefined>();
  const paymentMethodId = router.query.paymentMethodId ?? '';
  const customerId = router.query.customerId ?? '';
  const {
    data: contractData,
    loading,
    error,
  } = useContractsQuery({
    variables: {
      input: {
        customerId: customerId.toString(),
        page: 1,
        perPage: 50,
      },
    },
  });

  const [connectToContracts, { loading: loadingConnect }] = useConnectToContractsMutation({});

  const onSubmit = async () => {
    try {
      const { data: connectToContractsData } = await connectToContracts({
        variables: {
          input: {
            contractIds: chosenContracts,
            paymentMethodId: paymentMethodId.toString(),
          },
        },
      });
      if (!connectToContractsData) {
        makeToast.danger(t('card.changeFail'), '');
      }
      if (connectToContractsData) {
        makeToast.success(t('card.changeSuccess'), '');
        router.push(`/beta/${customerId}/greidslumati/${paymentMethodId}`);
      }
    } catch (error) {
      if (error instanceof Error) makeToast.danger(t('card.changeFail'), error.message);
    }
  };

  const setAsChosen = (id: string) => {
    const choices = chosenContracts;
    const isChosen = choices?.includes(id);
    if (isChosen) {
      setChosenContracts(choices?.filter((c) => c !== id));
    }
    if (!isChosen) {
      setChosenContracts(choices?.concat(id));
    }
  };

  const availableContracts = contractData?.contracts?.contracts?.filter(
    (c) => c?.paymentMethod?.id !== paymentMethodId,
  );

  const setAllAvailable = () => {
    if (availableContracts?.length === chosenContracts?.length) {
      setChosenContracts([]);
    } else {
      const getIds = availableContracts?.map((contract) => {
        return contract?.id;
      });
      setChosenContracts(getIds);
    }
  };

  if (error)
    return (
      <Box padding={30}>
        <Text>Something went wrong!</Text>
      </Box>
    );
  if (!contractData || loading || loadingConnect)
    return (
      <Box padding={30}>
        <Text>Loading.....</Text>
      </Box>
    );

  return (
    <Box>
      <Text variant="h5" marginBottom={5}>
        {t('card.chooseServices')}
      </Text>
      <Text marginBottom={5}>{t('card.connectServices')}</Text>
      <Grid gridTemplate={{ sm: 1, md: 2 }} columnGap={3} rowGap={3}>
        {availableContracts?.map((contract) => {
          return (
            <GridItem key={contract.id}>
              <Box
                borderStyle={chosenContracts?.includes(contract.id) ? 'solid' : 'none'}
                borderWidth="2px"
                borderColor={serviceColorMap(
                  contract?.contractItems[0]?.service?.type ?? ('Unknown' as ServiceType),
                )}
              >
                <InfoCard
                  color={serviceColorMap(
                    contract?.contractItems[0]?.service?.type ?? ('Unknown' as ServiceType),
                  )}
                  description={contract?.variant?.name}
                  coloredText={serviceSimpleNameMap(
                    contract?.contractItems[0]?.service?.type ?? ('Unknown' as ServiceType),
                  )}
                  icon={{
                    icon: serviceIconMap(
                      contract?.contractItems[0]?.service?.type ?? ('Unknown' as ServiceType),
                    ),
                  }}
                  renderAs="button"
                  shortTitle={contract?.payerName ?? ''}
                  onClick={() => setAsChosen(contract.id)}
                />
              </Box>
            </GridItem>
          );
        })}
      </Grid>
      <Box display="flex" flexDirection="row" gap={3}>
        <Box marginRight="auto" marginTop={10} width="4/12">
          <MainButton
            text="Velja Allt"
            colorScheme="black100"
            icon="checkMark"
            onClick={() => setAllAvailable()}
          />
        </Box>
        <Box marginLeft="auto" marginTop={10} width="4/12">
          <MainButton
            text={t('card.addUnder')}
            colorScheme={COLOR}
            icon="add"
            isDisabled={chosenContracts && chosenContracts.length < 1}
            onClick={() => onSubmit()}
          />
        </Box>
      </Box>
    </Box>
  );
};

export default LinkPaymentMethods;